<template>
	<view>
		<view style="font-size: 24rpx;margin-left: 12rpx;">万吨</view>
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
	</view>
	
</template>

<script>
	import {
		monthlyProductSales
	} from '@/api/sale.js'
	export default {
		props: ['yearMonth'],
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				// opts: {
				// 	dataLabel: false,
				// 	color: ["#48DE94", "#1F90FF", "#9463F7", "#F4C042", "#EE6666", "#1890FF", "#91CB74", "#FAC858",
				// 		"#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				// 		"#ea7ccc"
				// 	],
				// 	padding: [15, 15, 0, 5],
				// 	touchMoveLimit: 24,
				// 	enableScroll: true,
				// 	legend: {
				// 		lineHeight: 40,
				// 		show: true,
				// 		position: "top",
				// 		fontSize: 10,
				// 		// symbolWidth: 8,
				// 		// borderRadius: '50%'

				// 		// show: true,
				// 		// position: "top",
				// 		// fontSize:10,

				// 		// show: true,
				// 		// itemWidth: 12, // 图例项宽度（含标记+文本）
				// 		// itemHeight: 10, // 图例项高度
				// 		// symbolWidth: 8, // 标记块宽度
				// 		// symbolHeight: 8, // 标记块高度
				// 		// symbolPadding: 4, // 标记与文本间距
				// 		// formatter: function(name) {
				// 		// 	return {
				// 		// 		backgroundColor: this.colorList[this.seriesIndex],
				// 		// 		borderRadius: '50%', // 关键：圆形标记
				// 		// 		padding: [2, 4] // 调整标记内边距
				// 		// 	};
				// 		// }
				// 	},
				// 	xAxis: {
				// 		disableGrid: true,
				// 		scrollShow: true,
				// 		itemCount: 5
				// 	},
				// 	yAxis: {
				// 		data: [{
				// 			min: 0
				// 		}]
				// 	},
				// 	extra: {
				// 		column: {
				// 			type: "group",
				// 			width: 8,
				// 			seriesGap: 2,
				// 			activeBgColor: "#000000",
				// 			activeBgOpacity: 0.08,
				// 			barBorderCircle: true,
				// 		}
				// 	}
				// }
				opts: {
					dataLabel: false,
					color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {
						lineHeight: 18,
						show: true,
						position: 'bottom',
						fontSize: 10
					},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
						scrollShow: true,
						itemCount: 15
					},
					yAxis: {
						data: [
							{
								min: 0
							}
						]
					},
					extra: {
						column: {
							type: 'stack',
							width: 15,
							activeBgColor: '#000000',
							activeBgOpacity: 0.08,
							labelPosition: 'center'
						}
					}
					// extra: {
					// 	column: {
					// 		type: 'group',
					// 		width: 8,
					// 		seriesGap: 2,
					// 		activeBgColor: '#000000',
					// 		activeBgOpacity: 0.08,
					// 		barBorderCircle: true
					// 	}
					// }
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		watch: {
			yearMonth() {
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				monthlyProductSales(this.yearMonth).then(res => {
					// console.log(res);
					const transformedData = this.transformMaterialData(res.data);
					this.chartData = JSON.parse(JSON.stringify(transformedData));
				})
				// //模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 		series: [{
				// 				name: "目标值",
				// 				data: [35, 36, 31, 33, 13, 34]
				// 			},
				// 			{
				// 				name: "完成量",
				// 				data: [18, 27, 21, 24, 6, 28]
				// 			}
				// 		]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
			transformMaterialData(rawData) {
				// 创建类型-日期映射表  
				const typeMap = {};
				const dateSet = new Set();

				// 第一次遍历：建立映射关系  
				rawData.forEach(item => {
					const dateShort = item.date.slice(-2); // 提取日期后两位  
					dateSet.add(dateShort);

					if (!typeMap[item.type]) {
						typeMap[item.type] = {};
					}
					typeMap[item.type][dateShort] = item.value;
				});

				// 提取并排序日期  
				const categories = Array.from(dateSet).sort();

				// 构建series数组  
				const series = Object.keys(typeMap).map(type => {
					return {
						name: type,
						data: categories.map(date => {
							// 如果该日期存在数据则使用，否则返回null  
							return typeMap[type][date] ?? null;
						})
					};
				});
				console.log(series);
				return {
					categories,
					series
				};
			}
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>